<template>
  <a-form ref="formRef" size="large" layout="vertical" :model="formInline" @submit="handleSubmit">
    <a-form-item field="username" hide-label :rules="rules.username">
      <a-input v-model="formInline.username" size="large" placeholder="请输入用户名">
        <template #prefix>
          <icon-user style="color: #808695; font-size: 18px" />
        </template>
      </a-input>
    </a-form-item>
    <a-form-item field="mobile" hide-label :rules="rules.mobile">
      <div class="w-full flex">
        <a-input
          class="order-first"
          size="large"
          v-model="formInline.mobile"
          placeholder="请输入手机号码"
        >
          <template #prefix>
            <icon-mobile style="color: #808695; font-size: 18px" />
          </template>
        </a-input>
        <a-button class="ml-3 order-last" size="large" :disabled="isGetCode" @click="getCode"
          >{{ codeMsg }}<span v-if="isGetCode">s</span>
        </a-button>
      </div>
    </a-form-item>
    <a-form-item field="code" hide-label :rules="rules.code">
      <a-input v-model="formInline.code" size="large" placeholder="请输入验证码">
        <template #prefix>
          <icon-message style="color: #808695; font-size: 18px" />
        </template>
      </a-input>
    </a-form-item>
    <a-form-item field="password" hide-label :rules="rules.password">
      <a-input-password
        v-model="formInline.password"
        size="large"
        showPasswordOn="click"
        placeholder="请输入密码"
      >
        <template #prefix>
          <IconLock style="color: #808695; font-size: 18px" />
        </template>
      </a-input-password>
    </a-form-item>

    <a-form-item field="retPassword" hide-label :rules="rules.retPassword">
      <a-input-password
        v-model="formInline.retPassword"
        showPasswordOn="click"
        placeholder="请再次输入密码"
        @keyup.enter="handleSubmit"
        size="large"
      >
        <template #prefix>
          <IconLock style="color: #808695; font-size: 18px" />
        </template>
      </a-input-password>
    </a-form-item>

    <a-form-item hide-label :no-style="true">
      <a-button
        type="primary"
        html-type="submit"
        size="large"
        :loading="loading"
        long
        class="submit-btn"
      >
        注册
      </a-button>
    </a-form-item>

    <a-form-item field="agreement" hide-label :no-style="true">
      <div class="flex justify-between">
        <div class="flex-initial">
          <a-checkbox v-model:checked="formInline.agreement">我同意隐私协议</a-checkbox>
        </div>
      </div>
    </a-form-item>

    <!-- <a-form-item :show-label="false" hide-label>
      <a-button size="large" block @click="backLogin" long>返回</a-button>
    </a-form-item> -->
  </a-form>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import { IconUser, IconLock, IconMessage, IconMobile } from '@arco-design/web-vue/es/icon';

  const formRef = ref();
  const loading = ref(false);
  const codeMsg: any = ref('获取验证码');
  const isGetCode = ref(false);

  //const emit = defineEmits(['backLogin']);

  const formInline = reactive({
    username: '',
    password: '',
    retPassword: '',
    mobile: '',
    code: '',
    agreement: false,
  });

  const rules = {
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    mobile: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
    code: [{ required: true, message: '请输入短信验证码', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    retPassword: [{ required: true, message: '请输入确认密码', trigger: 'blur' }],
    agreement: [
      {
        required: true,
        type: 'boolean',
        trigger: 'change',
        validator: (_, value) => {
          if (value === true) {
            return Promise.resolve();
          }
          return Promise.reject('请先勾选协议');
        },
      },
    ],
  };

  function handleSubmit({ errors }) {
    if (errors) {
      return Message.error('请填写完整信息');
    }
    Message.success('注册准备就绪');
    loading.value = true;
  }

  // const backLogin = () => {
  //   emit('backLogin');
  // };

  function getCode() {
    codeMsg.value = 60;
    isGetCode.value = true;
    let time = setInterval(() => {
      codeMsg.value--;
      if (codeMsg.value <= 0) {
        clearInterval(time);
        codeMsg.value = '获取验证码';
        isGetCode.value = false;
      }
    }, 1000);
  }
</script>
<style>
  .submit-btn {
    margin: 10px 0;
  }
</style>
